
<template>
  <div class="tourist-home-page">
    <!--  左侧-->
    <div class="detail-left">
      <div class="detail-left-container">
        <!--        用户-->
        <div class="user-name">
          <div class="historical-dialogue-title">
            <div class="historical-dialogue-title-text" @click="userClick">
              <div class="tip">
                <img style="width: 30px;height: 30px;margin-left: 4px" src="../../assets/images/login/user_name@2x.png">
              </div>
              <div class="historical-dialogue-title-line">{{userName}}用户名称</div>
            </div>
            <div class="select-list-box" v-if="userIsShowOut">
              <div @click="outLogin" v-for="(item,index) in userList" :key="index" class="select-list-box-group">
                <div class="un-select-list-box-item" >
                  {{item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    游前规划-->
        <div class="main-matters">
          <div class="main-matters-title">
            <div class="main-matters-title-text">
              <div class="tip">
                <img style="width: 18px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="main-matters-title-line">游前规划</div>
            </div>
          </div>
          <div class="main-matters-list">
            <div :class="currentPreTripPlanning===index?'active-main-matters-item':'main-matters-item'" @click="preTripPlanningClick(item,index)"  v-for="(item,index) in preTripPlanning" :key="index">
              <div class="main-matters-item-title">
                {{item.planningName}}
              </div>
              <div v-if="item.isShow">
                <img style="width: 18px;height: 18px" src="@/assets/images/notLoggedIn/finish@2x.png">
              </div>

            </div>

          </div>

        </div>
        <!--    游中体验-->
        <div class="main-matters">
          <div class="main-matters-title">
            <div class="main-matters-title-text">
              <div class="tip">
                <img style="width: 18px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="main-matters-title-line">游中体验</div>
            </div>
          </div>
          <div class="main-matters-list">
            <div :class="currentPlanning===index?'active-main-matters-item':'main-matters-item'" @click="currentPlanningClick(item,index)"  v-for="(item,index) in currentPlanningName" :key="index">
              <div class="main-matters-item-title">
                {{item.currentPlanningName}}
              </div>

            </div>

          </div>

        </div>
        <!--    游后记录-->
        <div class="main-matters">
          <div class="main-matters-title">
            <div class="main-matters-title-text">
              <div class="tip">
                <img style="width: 18px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="main-matters-title-line">游后记录</div>
            </div>
          </div>
          <div class="main-matters-list">
            <div :class="currentPostTripRecord===index?'active-main-matters-item':'main-matters-item'" @click="currentPostTripRecordClick(item,index)"  v-for="(item,index) in postTripRecord" :key="index">
              <div class="main-matters-item-title">
                {{item.postTripRecordName}}
              </div>

            </div>

          </div>

        </div>
        <!--    历史对话-->
        <div class="historical-dialogue">
          <div class="historical-dialogue-title">
            <div class="historical-dialogue-title-text">
              <div class="tip">
                <img style="width: 18px;height: 14px;margin-left: 4px" src="../../assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="historical-dialogue-title-line">历史对话</div>
            </div>
          </div>
          <div class="historical-dialogue-list"></div>
        </div>
      </div>

    </div>
<!--      右侧-->
    <div class="detail-right">
      <div class="detail-right-container">
        <div class="detail-button-group">
          <div class="detail-button-group-left">
            <div class="detail-button-item" @click="newAnswer">
              <div class="button-new" >
                <img style="width: 16px;height: 16px;margin-right: 10px" src="../../assets/images/notLoggedIn/add@2x.png">
                <div class="title">新建对话</div>
              </div>

            </div>
            <div class="detail-button-item right" @click="clearAnswer">
              <div class="button-new" >
                <img style="width: 16px;height: 16px;margin-right: 10px" src="../../assets/images/notLoggedIn/clear@2x.png">
                <div class="title">清除记录</div>
              </div>

            </div>
          </div>
          <div class="detail-button-group-right"></div>
        </div>
        <div class="detail-answer-group">
<!--          游前规划-->
          <div class="input-top">
            <!--          旅游路线规划-->
            <TouristRoutePlanning v-if="currentPreTripPlanning===PREDICT_STATUS.TouristRoutePlanning" @nextPageRoute="nextPageRoute" :clearStatus="clearStatusValue"/>
            <!--            美食路线规划-->
            <FoodRoutePlanning v-else-if="currentPreTripPlanning===PREDICT_STATUS.FoodRoutePlanning" @nextPageRoute="nextPageRoute" :clearStatus="clearStatusValue"/>
            <TransportationAccommodationPlanning v-else-if="currentPreTripPlanning===PREDICT_STATUS.TransportationAccommodationPlanning" @nextPageRoute="nextPageRoute" :clearStatus="clearStatusValue"/>
            <PracticalTipsPlanning v-else-if="currentPreTripPlanning===PREDICT_STATUS.PracticalTipsPlanning" @nextPageRoute="nextPageRoute" :clearStatus="clearStatusValue"/>
<!--           游中规划-->
            <AttractionNavigation v-else-if="currentPlanning===EXPERIENCE_STATUS.AttractionNavigation" :clearStatus="clearStatusValue"/>
            <AttractionExplanation v-else-if="currentPlanning===EXPERIENCE_STATUS.AttractionExplanation" :clearStatus="clearStatusValue"/>
            <ServiceComplaints v-else-if="currentPlanning===EXPERIENCE_STATUS.ServiceComplaints" :clearStatus="clearStatusValue"/>
<!--            游后规划-->
            <SocialMediaFeeds v-else-if="currentPostTripRecord===RECORD_STATUS.SocialMediaFeeds" :clearStatus="clearStatusValue"/>



          </div>
          <div class="input-bottom">
            <VoiceInputBox />

          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup>
import api from "@/service/container";
const $router = useRouter();
import VoiceInputBox from "@/views/notLoggedIn/components/VoiceInputBox.vue";
import {computed, onMounted, ref} from "vue";
import TouristRoutePlanning from "@/views/home/components/PreTripPlanning/TouristRoutePlanning.vue";
import FoodRoutePlanning from "@/views/home/components/PreTripPlanning/FoodRoutePlanning.vue";
import TransportationAccommodationPlanning
  from "@/views/home/components/PreTripPlanning/TransportationAccommodationPlanning.vue";
import PracticalTipsPlanning from "@/views/home/components/PreTripPlanning/PracticalTipsPlanning.vue";
import AttractionNavigation from "@/views/home/components/currentPlanning/AttractionNavigation.vue";
import AttractionExplanation from "@/views/home/components/currentPlanning/AttractionExplanation.vue";
import ServiceComplaints from "@/views/home/components/currentPlanning/ServiceComplaints.vue";
import SocialMediaFeeds from "@/views/home/components/postTripRecord/SocialMediaFeeds.vue";
import {EXPERIENCE_STATUS, MENU_TYPE, PREDICT_STATUS, RECORD_STATUS} from "@/utils/consts";
import {useTouristHomepageStore} from "@/store/touristHomepage";
import {useSystemStore} from "@/store/system";
import {useRouter} from "vue-router";
const userList=ref([
  {
    id:1,
    name:"退出登录",
    avatar:"https://picsum.photos/200/300?random=1"
  }
])
// 游前规划
const preTripPlanning=ref([
    {
      id:1,
      planningName:"旅游路线规划",
      isShow:false
    },
    {
      id:2,
      planningName:"美食路线规划",
      isShow:false
    },
    {
      id:3,
      planningName:"交通住宿规划",
      isShow:false
    },
    {
      id:4,
      planningName:"实用贴士规划",
      isShow:false
    }
])
// 游中体验
const currentPlanningName=ref([
  {
    id:1,
    currentPlanningName:"AR景点导航"
  },
  {
    id:2,
    currentPlanningName:"景点讲解"
  },
  {
    id:3,
    currentPlanningName:"服务投诉"
  },
])
// 游后记录
const postTripRecord=ref([
    {
      id:1,
      postTripRecordName:"社交媒体动态智能生成"
    },
])
const currentPreTripPlanning=ref(0);
function preTripPlanningClick(data,index){
  currentPreTripPlanning.value=index;
  currentPlanning.value=-1;
  currentPostTripRecord.value=-1;
//   记录当前游前规划
  useTouristHomepageStore().setTouristPredict(MENU_TYPE.PREDICT_STATUS);
  useTouristHomepageStore().setTouristLittleStore(currentPreTripPlanning.value);

}
const currentPlanning=ref(-1);
function currentPlanningClick(data,index){
  currentPlanning.value=index;
  currentPreTripPlanning.value=-1;
  currentPostTripRecord.value=-1;
//   记录当前游前规划
  useTouristHomepageStore().setTouristPredict(MENU_TYPE.EXPERIENCE_STATUS);
  useTouristHomepageStore().setTouristLittleStore(currentPlanning.value);
}
const currentPostTripRecord=ref(-1);
function currentPostTripRecordClick(data,index){
  currentPostTripRecord.value=index;
  currentPreTripPlanning.value=-1;
  currentPlanning.value=-1;
//   记录当前游前规划
  useTouristHomepageStore().setTouristPredict(MENU_TYPE.RECORD_STATUS);
  useTouristHomepageStore().setTouristLittleStore(currentPostTripRecord.value);
}

function nextPageRoute(data){
  console.log('data也要改',data)
  preTripPlanning.value[data.typeRoute].isShow=data.isShow;
//   记录当前游前规划
  useTouristHomepageStore().setTouristPredict(MENU_TYPE.PREDICT_STATUS);
  useTouristHomepageStore().setTouristLittleStore(Number(data.typeRoute)+1);
  if((Number(data.typeRoute)+1) !==4){
    currentPreTripPlanning.value=(Number(data.typeRoute)+1);
  }else if((Number(data.typeRoute)+1) ===4){
    currentPreTripPlanning.value=-1;
  //   跳入游中体验
    currentPlanning.value=EXPERIENCE_STATUS.AttractionNavigation;
    //   记录当前游前规划
    useTouristHomepageStore().setTouristPredict(MENU_TYPE.EXPERIENCE_STATUS);
    useTouristHomepageStore().setTouristLittleStore(currentPlanning.value);

  }
//   存入store目前游前规划配置
  useTouristHomepageStore().setTouristPredictStore(preTripPlanning.value);
}
const userIsShowOut=ref(false);
function userClick(){
  userIsShowOut.value=!userIsShowOut.value;

}
function outLogin(){
//   清除缓存store
  useSystemStore().logOut();
  useTouristHomepageStore().clearTouristAiData();

//   跳转首页
  $router.push({
    name: "touristHomepage",

  })


}
function newAnswer(){
  clearStatus()
}
function clearAnswer(){
  clearStatus()
}
const clearStatusValue=ref(false);
function clearStatus(){
//   存入store目前是否点击新建对话

  if(useTouristHomepageStore().touristClearStatus){
    useTouristHomepageStore().setTouristClearStatus(false);
  }else {
    useTouristHomepageStore().setTouristClearStatus(true);
  }

}
const userInfo=ref(null);
const userName=ref(null);
// 查用户信息
function getUserInfo(){
  api.getUserInfoApi().then((res) => {
    console.log("userInfo----", res)
    userInfo.value=res.data;
    userName.value=res.data.phone;
    useTouristHomepageStore().setUserInfoStore(res.data);
  });
}

onMounted(() => {
  getUserInfo();
  let currentTourType=useTouristHomepageStore().setTouristType;
let littleTourType=useTouristHomepageStore().setTouristLittle;
//   显示当前游类型
  if(currentTourType===MENU_TYPE.PREDICT_STATUS){
    currentPreTripPlanning.value=littleTourType;
    currentPlanning.value=-1;
    currentPostTripRecord.value=-1;
    if(useTouristHomepageStore().setTouristPredictOffice && useTouristHomepageStore().setTouristPredictOffice.length>0){
      preTripPlanning.value=useTouristHomepageStore().setTouristPredictOffice
    }
  }else if (currentTourType===MENU_TYPE.EXPERIENCE_STATUS){
    currentPlanning.value=littleTourType;
    currentPreTripPlanning.value=-1;
    currentPostTripRecord.value=-1;
  }else if (currentTourType===MENU_TYPE.RECORD_STATUS){
    currentPostTripRecord.value=littleTourType;
    currentPreTripPlanning.value=-1;
    currentPlanning.value=-1;
  }


})

</script>

<style scoped lang="scss">
.tourist-home-page{
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/login/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  .detail-left{
    width: 280px;
    height: 100%;
    border-radius: 0px 0px 0px 0px;
    background-color: #FAF6F3;
    display: flex;
    justify-content: center;
    background-image: url("@/assets/images/notLoggedIn/detail_back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .detail-left-container{
      width: 220px;
      //用户名称
      .user-name{
        margin-top: 20px;
        .historical-dialogue-title{
          .historical-dialogue-title-text{
            cursor: pointer;
            display: flex;
            border-radius: 0px 0px 0px 0px;
            align-items: center;
            .historical-dialogue-title-line{
              margin-left: 8px;
              width: 96px;
              height: 24px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 16px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
          .select-list-box{
            box-shadow: 0px 4px 40px 0px rgba(119,81,20,0.16);
            border-radius: 8px 8px 8px 8px;
            border: 2px solid #FFFFFF;
            background-color: #FFFFFF;
            position: absolute;
            left: 60px;
            top:50px;
            width: 100px;
            height: 80px;
            z-index: 2000;
            overflow: auto;
            .select-list-box-group{
              display: flex;
              justify-content: center;
              .un-select-list-box-item{
                cursor: pointer;
                width: 60px;
                height: 30px;
                border-radius: 100px 100px 100px 100px;
                color: #AC6117;
                text-align: center;
                margin-top: 16px;
                font-family: DingliesongtypefaceRegular;
                font-weight: 400;
                font-size: 14px;
                line-height: 14px;
                font-style: normal;
                text-transform: none;
                line-height: 30px;
              }
              .un-select-list-box-item:hover{
                cursor: pointer;
                width: 80px;
                height: 30px;
                background: #F5ECE2;
                border-radius: 100px 100px 100px 100px;
                color: #AC6117;
                text-align: center;
                margin-top: 16px;
                font-family: DingliesongtypefaceRegular;
                font-weight: 400;
                font-size: 14px;
                line-height: 14px;
                font-style: normal;
                text-transform: none;
                line-height: 30px;
              }
            }

          }
        }
      }
      .main-matters{
        .main-matters-title{
          .main-matters-title-text{
            line-height: 84px;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            border-radius: 0px 0px 0px 0px;
            .main-matters-title-line{
              width: 96px;
              height: 24px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 24px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;

            }
          }

        }
        .main-matters-list{
          margin-top: 12px;
          .main-matters-item{
            width: 220px;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            .main-matters-item-title{
              font-family: DingliesongtypefaceRegular;
              height: 16px;
              font-weight: 400;
              font-size: 16px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
              cursor: pointer;
            }

          }
          .active-main-matters-item{
            display: flex;
            justify-content: space-between;
            height: 40px;
            background: linear-gradient( 90deg, #FFFFFF 0%,#EFE2D4 100%);
            border-radius: 8px 8px 8px 8px;
            line-height: 40px;
            .main-matters-item-title{
              font-family: DingliesongtypefaceRegular;
              height: 16px;
              font-weight: 400;
              font-size: 16px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
              cursor: pointer;
            }
          }
        }
      }
      .historical-dialogue{
        .historical-dialogue-title{
          .historical-dialogue-title-text{
            line-height: 84px;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            border-radius: 0px 0px 0px 0px;
            .historical-dialogue-title-line{
              width: 96px;
              height: 24px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 24px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }

      }
    }

  }
  .detail-right{
    width: calc(100% - 280px);
    display: flex;
    justify-content: center;

    .detail-right-container{
      width: 1300px;
      .detail-button-group{
        height: 100px;
        width: 80%;
        display: flex;
        .detail-button-group-left{
          display: flex;
          align-items: center;
          .detail-button-item{
            width: 118px;
            height: 40px;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #DCB6A2;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .button-new{
              display: flex;
              width: 82px;
              .title{
                font-family: DingliesongtypefaceRegular;
                width: 56px;
                height: 14px;
                font-weight: 400;
                font-size: 14px;
                color: #9B6548;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }

          }
          .right{
            margin-left: 24px;
          }
        }

      }
      .detail-answer-group{
        height: calc(100% - 100px);
        .input-top{
          height: calc(100% - 100px);
          overflow: auto;


        }
      }
    }


  }
}
</style>
